<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        table, tr, td,th {
            border: 1px solid #0094ff;
            text-align: center;
        }
        table {
            width: 500px;
        }
        .box{
            margin:30px 0px;
        }
    </style>
</head>
<body>

<div class="box">
    <input type="text" placeholder="名字"/>
    <input type="text" placeholder="年龄"/>
    <input type="text" placeholder="性别"/>
    <input type="button" id="save" value="保存"/>
</div>
<table cellpadding="0" cellspacing="0">
    <thead>
        <tr>
            <th>名字</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody id="tab">

    </tbody>
</table>
        <script>
          var btn=document.getElementById('save');//拿到一个DOM对象
          var obody=document.getElementById('tab');
          var arr=[];
          btn.onclick=function(){//绑定点击事件
              var inp=document.getElementsByTagName("input") ; //一个DOM对象
              var person={};//创建一个新的对象
              var uName=inp[0].value;//姓名
              var uAge=inp[1].value;//年龄
              var uSex=inp[2].value;//性别
              person.name=uName;
              person.age=uAge;//都是动态添加属性,不能有引号，否则就写死了
              person.sex=uSex;
              arr.push(person);//把对象添加到数组里面
              console.log(arr);

              for(var i=0;i<arr.length; i++){
             var row=obody.insertRow(-1);//创建tr

             var cell=row.insertCell(-1);//创建一个td
             cell.innerHTML=arr[i].name;

             var cell1=row.insertCell(-1);
             cell1.innerHTML=arr[i].age;

              var cell2=row.insertCell(-1);
              cell2.innerHTML=arr[i].sex;

              var btn1=row.insertCell(-1);
              btn1.innerHTML="<button onclick='del(this)'>删除</button>"
                  arr.splice(i,1);//删除原来数组
           }
          };
          function del(abc){
              var index=abc.parentNode.parentNode.rowIndex;//获取tr索引
              abc.parentNode.parentNode.parentNode.deleteRow(index-1);
              //-1是因为在table中thead中的tr索引为0

          }


        </script>
        
        
        
        
        
        
        
        
        
        
        
        
        


    </tbody>

</table>


</body>
</html>
